import React, { Component, Suspense } from 'react'
import http from "service/search";
import { Input, Pagination, Carousel, Select  } from 'antd';
import MyBackTop from 'components/MyBackTop';
import { spanceReg, urlReg } from 'utils/base';
import gzhImg from 'imgs/search/gzh.png';
import yjwImg from 'imgs/search/yjw.png';
import moment from "moment";
import 'sass/search/style.scss'
import "sass/search/standSearch.scss";
import mes from "../../components/Mes";

const { Search } = Input;
const { Option } = Select;
class newsSearch extends Component {
    constructor(props) {
        super(props);
        this.state = {
            current: 1,
            total: 0,
            showNum: 0,
            showKeyWord: '',
            searchKeyWord: this.props.match.params.keyWord,
            newsList: [],
            adUrl: [],
            model: this.props.match.params.type,
            selectType: ['产品图谱', '研究报告','雷霆微课堂']
        };
    }
    componentDidMount () {
        console.log(this.props.match.params.keyWord)
        window.scrollTo(0, 0);
        this.getSearchNews();
    }
    mapSearchData (list) {
        list.map((item) => {
            item.id = (item.reportId || item.graphId || item.miroclassId)
            item.title = (item.graphTitle || item.reportTitle || item.miroclassTitle)
            item.des = (item.simpleGraphIntroduction || item.introduction || item.miroclassIntroduction)
            item.publishTime = moment(item.createTime).format('YYYY/MM/DD')
            item.fication = item.miroclassClassification || item.graphIndustryCategory || item.reportIndustryCategory 
        })
        return list
    }
    getSearchNews = async () => {
        const { current, model, searchKeyWord } = this.state;
        if (!Boolean(searchKeyWord) || spanceReg.test(searchKeyWord)) {
            mes('warning', '请输入正确的标题');
            this.setState({ showKeyWord: '' });
            return false;
        } else {
            const data = {
                model: model,
                current: current,
                size: 10,
                value: searchKeyWord
            };
            let newsData = await http.getHangYeZhiKu(data);
            let newsList = this.mapSearchData(newsData.list)
            let total = newsData.total;
            this.setState((prevState) => ({
                newsList,
                total,
                showNum: total,
                showKeyWord: searchKeyWord,
            }))
        }
    }
    getNewestNews = async () => {
        let newestNewsData = await http.getNewestNews();
        let adUrl = newestNewsData.adUrl;
        this.setState({ adUrl });
    };
    changeType = (val)=>{
        this.setState({ model: val });
    }
    toSearch=(e)=>{
        e.preventDefault()
        this.getSearchNews()
    }
    toSearchUrl=(item)=>{
        switch (this.state.model) {
            case '1':
                window.open(`#/stands/chanpintupuDetail/${item.id}`)
                break;
            case'2':
                window.open(`#/stands/yanjiubaogaoDetail/${item.reportClassification}/${item.id}`)
                break;
            case '3':
                window.open(`#/stands/weiketangDetail/${item.id}`)
                break;
        }
    }
    render () {
        const { newsList, total, searchKeyWord, current, adUrl, showNum, showKeyWord, selectType,model } = this.state;
        return (
            <div className='search'>
                <div className='left'>
                    <form className="search-bar">
                        <div className="search-select">
                            <Select
                                style={{ width: '100%' }}
                                onChange={this.changeType}
                                placeholder={selectType[model-1]}>
                                <Option value="1">产品图谱</Option>
                                <Option value="2">研究报告</Option>
                                <Option value="3">雷霆微课堂</Option>
                            </Select>
                        </div>
                        <div className="search-input">
                            <input placeholder={searchKeyWord} onChange={this.inputChange} name="keyword" />
                        </div>
                        <div className="submit-button">
                            <input type="submit" value="搜索" onClick={this.toSearch} className="submit" />搜
                        </div>
                    </form>
                    <div className="search-total">共找到{total}个包含“{searchKeyWord}”的结果</div>
                    <div className='recommend'>
                        {
                            !total || total === 0 ? <div className='no_result'>没有找到哦，试试其他关键词吧~</div> :
                                newsList && newsList.map((item) => {
                                    return (
                                        <a onClick={this.toSearchUrl.bind(this, item)}  target='_blank' key={item.id}>
                                            <div className='news_list'>
                                                <div className='news_content_noImg'>
                                                    <p className='news_title'>{this.limitWords(item.title, 50)}</p>
                                                    <p className='news_desc' dangerouslySetInnerHTML={{ __html: this.limitWords(item.des, 120) }}></p>
                                                    <p className='release'>{item.publishTime}{item.fication?'|':''} {item.fication}</p>
                                                </div>
                                            </div>
                                        </a>
                                    )
                                })
                        }
                        {
                            !total || total === 0 ? '' :
                                <div className='page'>
                                    <Pagination defaultCurrent={current} total={total} onChange={(page) => { this.getPage(page) }} />
                                </div>
                        }
                    </div>
                </div>
                <div className='right'>
                    <div className='QR_code'>
                        <div className='title'>关注我们</div>
                        <div className='QR_code_content'>
                            <div className='QR_code_img'><img alt='' src={gzhImg} /></div>
                            <div className='QR_code_desc'>
                                <p className='desc_title'>雷霆应急网</p>
                                <p className='desc_content'>雷霆应急网微信公众号</p>
                            </div>
                        </div>
                        <div className='title'>客户端</div>
                        <div className='QR_code_content'>
                            <div className='QR_code_img'><img alt='' src={yjwImg} /></div>
                            <div className='QR_code_desc'>
                                <p className='desc_title'>雷霆应急网APP</p>
                                <p className='desc_content'>应急行业专业门户</p>
                            </div>
                        </div>
                    </div>
                    {
                        !!adUrl.length && <div className='ad'>
                            <Carousel autoplay dots={false}>
                                {
                                    adUrl.map((item, index) => {
                                        return (
                                            <a href={this.jump(item.jumpLink)} target='_blank' key={index}>
                                                <div>
                                                    <img alt='' src={item.picUrl} />
                                                </div>
                                            </a>
                                        )
                                    })
                                }
                            </Carousel>
                        </div>
                    }
                    <MyBackTop />
                </div>
            </div>
        )
    }

    // 搜索
    searchKeyWord = (value) => {
        this.setState((prevState) => ({
            current: 1,
            total: 0,
            searchKeyWord: value,
            newsList: [],
        }), () => {
            this.getSearchNews();
        });
    };
    // 翻页
    getPage = (page) => {
        this.setState((prevState) => ({
            current: page,
            newsList: []
        }), () => {
            this.getSearchNews();
        });
    };
    // 新闻字数限制
    limitWords = (Words, limit) => {
        if (!Words) {
            return Words
        }
        let length = Words.length;
        
        if (length > limit) {
            return Words.substring(0, limit) + "...";
        }
        return Words
    };
    // 输入框输入值
    inputChange = (e) => {
        let searchKeyWord = e.target.value;
        this.setState((prevState) => ({
            searchKeyWord
        }))
    };
    // 广告跳转
    jump = (url) => {
        if (!Boolean(url)) return;
        let newUlr = urlReg(url);
        return newUlr;
    }
}

export default newsSearch